<script setup>
import { ref } from "vue";
import { ElMessage } from 'element-plus'
const passwdData = ref({
  oldPassword: '',
  newPassword1: '',
  newPassword2: ''

});
const is = ref(true)
//自定义确认密码的校验函数
const rePasswordValid1 = (rule, value, callback) => {
    if (value == null || value === '') {
      is.value=true
        callback(new Error('请再次确认密码'))
    }else if (passwdData.value.newPassword2 !== value) {
      is.value=true
        callback(new Error('两次输入密码不一致'))
    }else if (value.length>20||value.length<5) {
      is.value=true
        // callback(new Error('两次输入密码不一致'))
    }else{
        is.value=false
        callback()
    }
}
const rePasswordValid2 = (rule, value, callback) => {
    if (value == null || value === '') {
        is.value=true
        callback(new Error('请再次确认密码'))
    }else if (passwdData.value.newPassword1 !== value) {
        is.value=true
        callback(new Error('两次输入密码不一致'))

    }else{
        is.value=false
        callback()
    }
}
const rules = {
  oldPassword: [
    {required: true, message: '请输入原密码',trigger: 'blur'},
    {min: 5, max: 20, message: '长度为5~20位非空字符', trigger: 'blur'}
  ],
  newPassword1: [
    {required: true, message: '请输入新密码',trigger: 'blur'},
    {min: 5, max: 20, message: '长度为5~20位非空字符', trigger: 'blur'},
    { validator: rePasswordValid1, trigger: 'change' }
  ],
  newPassword2: [
    {required: true, message: '请再次输入新密码',trigger: 'blur'},
    { validator: rePasswordValid2, trigger: 'change' }
  ]
};
import {useTokenStore} from '@/stores/token.js'
import adminInfoStore from "@/stores/userInfo.js";
import {adminUpdatePwd } from '@/api/admin.js'
import {useRouter} from 'vue-router'
const router = useRouter()
const tokenStore = useTokenStore();
const adminInfo = adminInfoStore();
const updatePwd = async()=>{
    //调用接口，完成修改
    let result = await adminUpdatePwd(passwdData.value);
    ElMessage.success('修改成功')
    tokenStore.removeToken()
    adminInfo.removeInfo()
    //跳转到首页 路由完成跳转
    router.push('/')
}
</script>
<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>修改密码</span>
      </div>
    </template>
    <el-row>
      <el-col :span="12">
        <el-form
          :model="passwdData"
          :rules="rules"
          label-width="150px"
          size="large"
        >
          <el-form-item label="旧密码" prop="oldPassword">
            <el-input v-model="passwdData.oldPassword" type="password" show-password></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword1">
            <el-input v-model="passwdData.newPassword1" type="password" show-password></el-input>
          </el-form-item>
          <el-form-item label="再次输入新密码" prop="newPassword2">
            <el-input v-model="passwdData.newPassword2" type="password" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updatePwd" :disabled=is >提交修改</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </el-card>
</template>